<template>
	<div>
		<!-- 设置参数标题 -->
		<el-alert title="注意：只允许为第三级分类设置相关参数！" type="info" show-icon :closable="false"
			style="background: #f4f4f5; color: #909399;" center></el-alert>
		<!-- 步骤条 -->
		<el-steps :active="active-0" finish-status="success" align-center>
			<el-step v-for="(item,index) in activeList" :key="index" :title="item.name"></el-step>
		</el-steps>
		<!-- 选项卡 -->
		<el-tabs tab-position="left" style="height: 100%;" v-model="active">
			<el-tab-pane label="基本信息" name="0">
				<Goodsinfo />
			</el-tab-pane>
			<el-tab-pane label="商品参数" name="1">商品参数</el-tab-pane>
			<el-tab-pane label="商品属性" name="2">商品属性</el-tab-pane>
			<el-tab-pane label="商品图片" name="3">商品图片</el-tab-pane>
			<el-tab-pane label="商品内容" name="4">商品内容</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import Goodsinfo from './GoodsInfos/goodsinfo.vue';
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: [],
		// 局部注册的组件
		components: {
			Goodsinfo
		},
		// 组件状态值
		data() {
			return {
				active: 0,
				activeList: [{
						name: '基本信息'
					}, {
						name: '商品参数'
					}, {
						name: '商品属性'
					},
					{
						name: '商品图片'
					},
					{
						name: '商品内容'
					},
					{
						name: '完成'
					},
				]
			}
		},
		mounted() {},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {},
		/**
		 * 组件实例创建完成
		 */
		created() {},
	}
</script>

<style scoped>
	.el-steps {
		margin: 20px 0;
	}
</style>
